<template>
  <div class="p-3">
    <a-table
      :columns="columns"
      row-key="id"
      :data-source="pageData"
      :pagination="pagination"
      :loading="loading"
      :scroll="{ x: true }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'dynamicsId'">
          <a href="javascript:void(0)" @click="showDynamic(record)">{{ record.dynamicsId }}</a>
        </template>
        <template v-else-if="column.key === 'commentContent'">
          <div class="comment-content">{{ record.commentContent }}</div>
        </template>
        <ExamineStatus
          v-else-if="column.key === 'oper'"
          :record="record"
          :update-action="updateUserComment"
          :refresh-pagination="refreshPagination"
          empty-text="--"
        />
      </template>
    </a-table>
    <a-drawer v-model:visible="drawerVisible" :title="drawerTitle" placement="right">
      <div class="flex flex-row justify-center items-center">
        <div>
          <a-avatar size="large">
            <template #icon><UserOutlined /></template>
          </a-avatar>
        </div>
        <div class="flex-1 pl-3">
          <div>
            <span class="text-lg">张三</span>
            <span class="text-gray-900 ml-3">金牌会员</span>
          </div>
          <div class="text-gray-400"> 个性签名xxxxxxxxxxxxx </div>
        </div>
      </div>
      <div style="padding-left: 54px" class="mt-3">
        <div> 这个是发布的动态信息这个是发布的动态信息这个是发布的动态信息这个是发布的动态信息</div>
        <a-row :gutter="5">
          <a-col span="8"><a-image width="100%" :src="DEFAULT_IMG_BASE64_STR" /></a-col>
          <a-col span="8"><a-image width="100%" :src="DEFAULT_IMG_BASE64_STR" /></a-col>
          <a-col span="8"><a-image width="100%" :src="DEFAULT_IMG_BASE64_STR" /></a-col>
        </a-row>
        <a-row :gutter="5" class="mt-1">
          <a-col span="8"><a-image width="100%" :src="DEFAULT_IMG_BASE64_STR" /></a-col>
          <a-col span="8"><a-image width="100%" :src="DEFAULT_IMG_BASE64_STR" /></a-col>
          <a-col span="8"><a-image width="100%" :src="DEFAULT_IMG_BASE64_STR" /></a-col>
        </a-row>
        <a-row :gutter="5" class="mt-1">
          <a-col span="8"><a-image width="100%" :src="DEFAULT_IMG_BASE64_STR" /></a-col>
          <a-col span="8"><a-image width="100%" :src="DEFAULT_IMG_BASE64_STR" /></a-col>
          <a-col span="8"><a-image width="100%" :src="DEFAULT_IMG_BASE64_STR" /></a-col>
        </a-row>
        <div class="mt-3 bg-gray-100 p-2 pb-1">
          <div v-for="el in commentData" :key="el.key" class="pb-1">
            <span v-if="el.replyName">
              <span class="text-blue-700">{{ el.replyName }}</span>
              回复
              <span class="text-blue-700">{{ el.name }}</span>
              :
            </span>
            <span v-else>
              <span class="text-blue-700">{{ el.name }}</span>
              :
            </span>
            <span class="ml-2">{{ el.content }}</span>
          </div>
        </div>
      </div>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { UserOutlined } from "@ant-design/icons-vue";
import { CommentItem, getUserComments, updateUserComment } from "/@/api/manage/userContent";
import { usePagination } from "/@/hooks/web/usePagination";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/img";
import { commentStatusData } from "/@/base/data";
import { getLabelByValue } from "/@/utils/common";
import { message, Modal } from "ant-design-vue";
import ExamineStatus from "/@/components/ExamineStatus.vue";
export default defineComponent({
  components: { UserOutlined, ExamineStatus },
  setup() {
    //table
    const columns = [
      {
        title: "评论ID",
        dataIndex: "id",
      },
      {
        title: "评论内容",
        dataIndex: "commentsContent",
        key: "commentsContent",
      },
      {
        title: "所在动态ID",
        dataIndex: "dynamicsId",
        key: "dynamicsId",
      },
      {
        title: "被回复内容",
        dataIndex: "contentReplied",
      },
      {
        title: "用户昵称",
        dataIndex: "nickName",
      },
      {
        title: "用户ID",
        dataIndex: "userId",
      },
      {
        title: "状态",
        dataIndex: "status",
        customRender({ text }) {
          return getLabelByValue(text, commentStatusData);
        },
      },
      {
        title: "发布时间",
        dataIndex: "createTime",
      },
      {
        title: "操作",
        key: "oper",
      },
    ];
    const { refreshPagination, pagination, pageData, loading } = usePagination(getUserComments);
    onMounted(async () => {
      await refreshPagination();
    });
    //
    function updateStatus(record: CommentItem, status: number) {
      Modal.confirm({
        content: ["", "确认审核通过吗？", "确认审核不通过吗？", "确认下线吗？"][status],
        title: "温馨提示",
        onOk: async () => {
          const re = await updateUserComment({
            id: record.id,
            status,
          });
          if (re) {
            message.success("操作成功");
            await refreshPagination();
          }
        },
      });
    }
    //动态详情
    const drawerVisible = ref(false);
    const drawerTitle = ref("");
    function showDynamic(record) {
      drawerTitle.value = `${record.nickName}动态详情`;
      drawerVisible.value = true;
    }
    const commentData = ref([
      {
        name: "张三",
        content: "dqwqwdqw",
      },
      {
        name: "张三",
        replyName: "李四",
        content: "好巧啊，加个关注吧，没想到这里都能遇到你",
      },
      {
        name: "张三",
        replyName: "李四",
        content: "好巧啊，加个关注吧，没想到这里都能遇到你",
      },
      {
        name: "张三",
        replyName: "李四",
        content: "好巧啊，加个关注吧，没想到这里都能遇到你",
      },
    ]);
    return {
      columns,
      pageData,
      loading,
      pagination,
      drawerVisible,
      drawerTitle,
      updateStatus,
      showDynamic,
      DEFAULT_IMG_BASE64_STR,
      commentData,
      updateUserComment,
      refreshPagination,
    };
  },
});
</script>
<style lang="less">
.comment-content {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
